<template>
    <div>
        <el-dialog
            v-if="dialogVisible"
            :title="title"
            :visible="dialogVisible"
            width="900px"
            top="10vh" 
            :close-on-click-modal="false"
            :before-close="dialogBeforeClose">
            <div>
                <el-form
                    ref="form"
                    :rules="rules"
                    inline
                    label-suffix=" :"
                    :model="formData"
                    style="margin-top:15px"
                    label-width="120px">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="formData.username" placeholder="请输入账号" class="ipt" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="formData.password" placeholder="请输入密码" class="ipt" type="password" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式">
                        <el-input v-model="formData.phone" placeholder="请输入联系方式" class="ipt" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="formData.remark" placeholder="请输入备注" class="ipt" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="是否为管理员">
                        <el-radio-group v-model="formData.isAdmin" style="width: 280px;">
                            <el-radio :label="0">否</el-radio>
                            <el-radio :label="1">是</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="角色" prop="roleId" v-if="formData.isAdmin === 0">
                        <el-select 
                            class="ipt"
                            v-model="formData.roleId" 
                            filterable
                            placeholder="请选择角色"
                            clearable>
                            <el-option
                                v-for="item in roleOption"
                                :key="item.roleId"
                                :label="item.roleName"
                                :value="item.roleId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer">
                <el-button @click="dialogBeforeClose" >取 消</el-button>
                <el-button type="primary" @click="ok" >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'add-equipment',
        data () {
            return {
                formData: {
                    isAdmin: 0
                },
                rules: {
                    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                    roleId: [{ required: true, message: '请选择角色', trigger: 'change' }],
                },
                resolve: null,
                dialogVisible: false,
                title: '添加账号',
                type: 'addAdmin',
                roleOption: [],
                parkOption: [],
                options: []
            }
        },
        methods: {
            open (type,data) {
                this.type = type
                this.title = type === 'addAdmin' ? '添加账号' : '编辑账号'
                this.formData = this._.cloneDeep(data ?? { ...this.formData })
                this.getRole()
                this.dialogVisible = true
                return new Promise(resolve => {
                    this.resolve = resolve
                })
            },
            async getRole(){
                try{ 
                    const { data : res } = await this.$api.Role.getRoleList({})
                    if(res.code) return this.$message.error(res.msg)
                    this.roleOption = res.result
                }catch(e){ 
                    console.log(e);
                }
            },
            dialogBeforeClose() {
                this.formData = {}
                this.dialogVisible = false
            },
            async ok () {
                this.$refs.form.validate(async val=> { 
                    if(!val) return false
                    const { roleId } = this.formData
                    for(let v of this.roleOption){ 
                        if(v.roleId === roleId) this.$set(this.formData,'roleName',v.roleName)
                    }
                    const { data: res } = await this.$api.Admin[this.type]({
                        ...this.formData,
                    })
                    if (res.code !== 0) return this.$message.error(res.msg || '更新失败!')
                    this.$message.success(res.msg || '操作成功！')
                    this.dialogBeforeClose()
                    this.resolve()                    
                })
            },

        },
    }
</script>

<style scoped>
    .ipt {
        width: 280px;
    }
</style>